@import "../../../../../style/color";

:local {
  width: 100%;
  height: 102px;

  .top:hover {
    cursor: pointer;
  }

  .user {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 10px 0;
    height: 44px;


    .head-portrait {
      height: 100%;
      width: 40px;
      display: block;
      padding-right: 15px;


      img {
        //height: 40px;
        //width: 40px;
        height: 40px;
        width: 100%;
        border: 2px solid #fff;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
      }
    }

    &-show {
      height: 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      //align-items: center;

      .welcome{
        color: $light-font-color;
        padding-bottom: 5px;
      }

      p{
        height: 20px;
        line-height: 20px;
        margin: 0;

        a:first-child:after{
          content: ' | ';
          color: $dark-font-color;
        }
      }

      //&:first-child {
      //  line-height: 22px;
      //  color: $light-font-color;
      //}

      //a:first-of-type{
      //  line-height: 22px;
      //    color: $light-font-color;
      //}
    }

    &-profit{
      height: 24px;
      text-align: center;
      position: relative;

      &:after{
        content: '';
        position: absolute;
        bottom: -10px;
        left: 15px;
        right: 15px;
        height: 1px;
        background: linear-gradient(270deg,white,#eeeeee,#eeeeee,white);
      }

      a{
        font-size: 12px;
        display:inline-block;
        width: 70px;
        height: 100%;
        line-height: 24px;
        border-radius: 13px;

        &:first-child{
          background-color: red;
          color: white;
        }

        &:nth-child(2){
          background-color: black;
          color: gold;
        }
      }
    }
  }
}
